<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2647257" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">支付宝</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">重大事件预警</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">报告导出</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">乱点列表</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">导出历史</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">要素预警</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">花果园</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">节日预警</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">地点预警</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">关键词预警</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">嫌疑人预警</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">当期预警</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">预警查询</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">研判列表</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">研判统计</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">自定义标签超市</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">技战法模型超市</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">常规图表研判</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
                <div class="name">常规警情列表</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">常规专题研判台</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">常规地图模式</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">常规情报颗粒</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">常规警情统计</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">智能工具箱</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">图表研判</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">AI魔方</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">AI预警中心</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">常规统计分析</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">AI辖区监测</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
                <div class="name">AI要素赋能</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">AI专题感知</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">AI机器人</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">AI专题研判台</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">AI研判</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">地图模式</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">警情统计</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">AI专题工作台</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">二及标签</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">AI情报颗粒</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">三级标签</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">AI质态监管</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">置信度核查</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">环比</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">同比</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
                <div class="name">男性</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">老人</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">女性</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">青年</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">未填报</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">中年人</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">小孩</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c9;</span>
                <div class="name">自定义标签</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">AI加人工标签</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">位置</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f4;</span>
                <div class="name">警示 感叹号 ！2</div>
                <div class="code-name">&amp;#xe7f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">辖区</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">全部</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
                <div class="name">网站名</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">姓名</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">金额</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
                <div class="name">银行卡</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">车牌</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">身份证</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">报告中心</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">橙色预警</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">黄色预警</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">红色预警</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">蓝色预警</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">预警</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">下发整改</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">AI</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">AI角标</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">技战法模型</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">标签配置</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">接警</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">反馈</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">反馈角标</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">热词预警</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">智能报告</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">清空</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">敏感词</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">接警角标</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">门户信息审核</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">人员管理</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">时 间</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1634285404617') format('woff2'),
       url('iconfont.woff?t=1634285404617') format('woff'),
       url('iconfont.ttf?t=1634285404617') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-zhifubao"></span>
            <div class="name">
              支付宝
            </div>
            <div class="code-name">.icon-zhifubao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongdashijianyujing"></span>
            <div class="name">
              重大事件预警
            </div>
            <div class="code-name">.icon-zhongdashijianyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baogaodaochu"></span>
            <div class="name">
              报告导出
            </div>
            <div class="code-name">.icon-baogaodaochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luandianliebiao"></span>
            <div class="name">
              乱点列表
            </div>
            <div class="code-name">.icon-luandianliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochulishi"></span>
            <div class="name">
              导出历史
            </div>
            <div class="code-name">.icon-daochulishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yaosuyujing"></span>
            <div class="name">
              要素预警
            </div>
            <div class="code-name">.icon-yaosuyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huaguoyuan"></span>
            <div class="name">
              花果园
            </div>
            <div class="code-name">.icon-huaguoyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jieriyujing"></span>
            <div class="name">
              节日预警
            </div>
            <div class="code-name">.icon-jieriyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-didianyujing"></span>
            <div class="name">
              地点预警
            </div>
            <div class="code-name">.icon-didianyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanjianciyujing"></span>
            <div class="name">
              关键词预警
            </div>
            <div class="code-name">.icon-guanjianciyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xianyirenyujing"></span>
            <div class="name">
              嫌疑人预警
            </div>
            <div class="code-name">.icon-xianyirenyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dangqiyujing"></span>
            <div class="name">
              当期预警
            </div>
            <div class="code-name">.icon-dangqiyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yujingchaxun"></span>
            <div class="name">
              预警查询
            </div>
            <div class="code-name">.icon-yujingchaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanpanliebiao"></span>
            <div class="name">
              研判列表
            </div>
            <div class="code-name">.icon-yanpanliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanpantongji"></span>
            <div class="name">
              研判统计
            </div>
            <div class="code-name">.icon-yanpantongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidingyibiaoqianchaoshi"></span>
            <div class="name">
              自定义标签超市
            </div>
            <div class="code-name">.icon-zidingyibiaoqianchaoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jizhanfamoxingchaoshi"></span>
            <div class="name">
              技战法模型超市
            </div>
            <div class="code-name">.icon-jizhanfamoxingchaoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changguitubiaoyanpan"></span>
            <div class="name">
              常规图表研判
            </div>
            <div class="code-name">.icon-changguitubiaoyanpan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changguijingqingliebiao"></span>
            <div class="name">
              常规警情列表
            </div>
            <div class="code-name">.icon-changguijingqingliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changguizhuantiyanpantai"></span>
            <div class="name">
              常规专题研判台
            </div>
            <div class="code-name">.icon-changguizhuantiyanpantai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changguiditumoshi"></span>
            <div class="name">
              常规地图模式
            </div>
            <div class="code-name">.icon-changguiditumoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changguiqingbaokeli"></span>
            <div class="name">
              常规情报颗粒
            </div>
            <div class="code-name">.icon-changguiqingbaokeli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changguijingqingtongji"></span>
            <div class="name">
              常规警情统计
            </div>
            <div class="code-name">.icon-changguijingqingtongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhinenggongjuxiang"></span>
            <div class="name">
              智能工具箱
            </div>
            <div class="code-name">.icon-zhinenggongjuxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaoyanpan"></span>
            <div class="name">
              图表研判
            </div>
            <div class="code-name">.icon-tubiaoyanpan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AImofang"></span>
            <div class="name">
              AI魔方
            </div>
            <div class="code-name">.icon-AImofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIyujingzhongxin"></span>
            <div class="name">
              AI预警中心
            </div>
            <div class="code-name">.icon-AIyujingzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changguitongjifenxi"></span>
            <div class="name">
              常规统计分析
            </div>
            <div class="code-name">.icon-changguitongjifenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIxiaqujiance"></span>
            <div class="name">
              AI辖区监测
            </div>
            <div class="code-name">.icon-AIxiaqujiance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIyaosufuneng"></span>
            <div class="name">
              AI要素赋能
            </div>
            <div class="code-name">.icon-AIyaosufuneng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIzhuantiganzhi"></span>
            <div class="name">
              AI专题感知
            </div>
            <div class="code-name">.icon-AIzhuantiganzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIjiqiren"></span>
            <div class="name">
              AI机器人
            </div>
            <div class="code-name">.icon-AIjiqiren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIzhuantiyanpantai"></span>
            <div class="name">
              AI专题研判台
            </div>
            <div class="code-name">.icon-AIzhuantiyanpantai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIyanpan"></span>
            <div class="name">
              AI研判
            </div>
            <div class="code-name">.icon-AIyanpan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditumoshi"></span>
            <div class="name">
              地图模式
            </div>
            <div class="code-name">.icon-ditumoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jingqingtongji"></span>
            <div class="name">
              警情统计
            </div>
            <div class="code-name">.icon-jingqingtongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIzhuantigongzuotai"></span>
            <div class="name">
              AI专题工作台
            </div>
            <div class="code-name">.icon-AIzhuantigongzuotai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erjibiaoqian"></span>
            <div class="name">
              二及标签
            </div>
            <div class="code-name">.icon-erjibiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIqingbaokeli"></span>
            <div class="name">
              AI情报颗粒
            </div>
            <div class="code-name">.icon-AIqingbaokeli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanjibiaoqian"></span>
            <div class="name">
              三级标签
            </div>
            <div class="code-name">.icon-sanjibiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIzhitaijianguan"></span>
            <div class="name">
              AI质态监管
            </div>
            <div class="code-name">.icon-AIzhitaijianguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhixinduhecha"></span>
            <div class="name">
              置信度核查
            </div>
            <div class="code-name">.icon-zhixinduhecha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huanbi"></span>
            <div class="name">
              环比
            </div>
            <div class="code-name">.icon-huanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongbi"></span>
            <div class="name">
              同比
            </div>
            <div class="code-name">.icon-tongbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nanxing"></span>
            <div class="name">
              男性
            </div>
            <div class="code-name">.icon-nanxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-laoren"></span>
            <div class="name">
              老人
            </div>
            <div class="code-name">.icon-laoren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nvxing"></span>
            <div class="name">
              女性
            </div>
            <div class="code-name">.icon-nvxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingnian"></span>
            <div class="name">
              青年
            </div>
            <div class="code-name">.icon-qingnian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weitianbao"></span>
            <div class="name">
              未填报
            </div>
            <div class="code-name">.icon-weitianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongnianren"></span>
            <div class="name">
              中年人
            </div>
            <div class="code-name">.icon-zhongnianren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaohai"></span>
            <div class="name">
              小孩
            </div>
            <div class="code-name">.icon-xiaohai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidingyibiaoqian"></span>
            <div class="name">
              自定义标签
            </div>
            <div class="code-name">.icon-zidingyibiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIjiarengongbiaoqian"></span>
            <div class="name">
              AI加人工标签
            </div>
            <div class="code-name">.icon-AIjiarengongbiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weizhi"></span>
            <div class="name">
              位置
            </div>
            <div class="code-name">.icon-weizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jingshigantanhao2"></span>
            <div class="name">
              警示 感叹号 ！2
            </div>
            <div class="code-name">.icon-jingshigantanhao2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaqu"></span>
            <div class="name">
              辖区
            </div>
            <div class="code-name">.icon-xiaqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanbu"></span>
            <div class="name">
              全部
            </div>
            <div class="code-name">.icon-quanbu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wangzhanming"></span>
            <div class="name">
              网站名
            </div>
            <div class="code-name">.icon-wangzhanming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dizhi"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-dizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingming"></span>
            <div class="name">
              姓名
            </div>
            <div class="code-name">.icon-xingming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jine"></span>
            <div class="name">
              金额
            </div>
            <div class="code-name">.icon-jine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-QQ"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.icon-QQ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.icon-shouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinhangka"></span>
            <div class="name">
              银行卡
            </div>
            <div class="code-name">.icon-yinhangka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-youxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chepai"></span>
            <div class="name">
              车牌
            </div>
            <div class="code-name">.icon-chepai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenfenzheng"></span>
            <div class="name">
              身份证
            </div>
            <div class="code-name">.icon-shenfenzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baogaozhongxin"></span>
            <div class="name">
              报告中心
            </div>
            <div class="code-name">.icon-baogaozhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengseyujing"></span>
            <div class="name">
              橙色预警
            </div>
            <div class="code-name">.icon-chengseyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huangseyujing"></span>
            <div class="name">
              黄色预警
            </div>
            <div class="code-name">.icon-huangseyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hongseyujing"></span>
            <div class="name">
              红色预警
            </div>
            <div class="code-name">.icon-hongseyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lanseyujing"></span>
            <div class="name">
              蓝色预警
            </div>
            <div class="code-name">.icon-lanseyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yujing"></span>
            <div class="name">
              预警
            </div>
            <div class="code-name">.icon-yujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiafazhenggai"></span>
            <div class="name">
              下发整改
            </div>
            <div class="code-name">.icon-xiafazhenggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AI"></span>
            <div class="name">
              AI
            </div>
            <div class="code-name">.icon-AI
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-AIjiaobiao"></span>
            <div class="name">
              AI角标
            </div>
            <div class="code-name">.icon-AIjiaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jizhanfamoxing"></span>
            <div class="name">
              技战法模型
            </div>
            <div class="code-name">.icon-jizhanfamoxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqianpeizhi"></span>
            <div class="name">
              标签配置
            </div>
            <div class="code-name">.icon-biaoqianpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiejing"></span>
            <div class="name">
              接警
            </div>
            <div class="code-name">.icon-jiejing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fankui1"></span>
            <div class="name">
              反馈
            </div>
            <div class="code-name">.icon-fankui1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fankuijiaobiao"></span>
            <div class="name">
              反馈角标
            </div>
            <div class="code-name">.icon-fankuijiaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reciyujing"></span>
            <div class="name">
              热词预警
            </div>
            <div class="code-name">.icon-reciyujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu2"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhinengbaogao"></span>
            <div class="name">
              智能报告
            </div>
            <div class="code-name">.icon-zhinengbaogao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingkong"></span>
            <div class="name">
              清空
            </div>
            <div class="code-name">.icon-qingkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia1"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minganci"></span>
            <div class="name">
              敏感词
            </div>
            <div class="code-name">.icon-minganci
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiejingjiaobiao"></span>
            <div class="name">
              接警角标
            </div>
            <div class="code-name">.icon-jiejingjiaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drxx69"></span>
            <div class="name">
              门户信息审核
            </div>
            <div class="code-name">.icon-drxx69
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drxx91"></span>
            <div class="name">
              人员管理
            </div>
            <div class="code-name">.icon-drxx91
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时 间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhifubao"></use>
                </svg>
                <div class="name">支付宝</div>
                <div class="code-name">#icon-zhifubao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongdashijianyujing"></use>
                </svg>
                <div class="name">重大事件预警</div>
                <div class="code-name">#icon-zhongdashijianyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baogaodaochu"></use>
                </svg>
                <div class="name">报告导出</div>
                <div class="code-name">#icon-baogaodaochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luandianliebiao"></use>
                </svg>
                <div class="name">乱点列表</div>
                <div class="code-name">#icon-luandianliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochulishi"></use>
                </svg>
                <div class="name">导出历史</div>
                <div class="code-name">#icon-daochulishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yaosuyujing"></use>
                </svg>
                <div class="name">要素预警</div>
                <div class="code-name">#icon-yaosuyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huaguoyuan"></use>
                </svg>
                <div class="name">花果园</div>
                <div class="code-name">#icon-huaguoyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jieriyujing"></use>
                </svg>
                <div class="name">节日预警</div>
                <div class="code-name">#icon-jieriyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-didianyujing"></use>
                </svg>
                <div class="name">地点预警</div>
                <div class="code-name">#icon-didianyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanjianciyujing"></use>
                </svg>
                <div class="name">关键词预警</div>
                <div class="code-name">#icon-guanjianciyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xianyirenyujing"></use>
                </svg>
                <div class="name">嫌疑人预警</div>
                <div class="code-name">#icon-xianyirenyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dangqiyujing"></use>
                </svg>
                <div class="name">当期预警</div>
                <div class="code-name">#icon-dangqiyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yujingchaxun"></use>
                </svg>
                <div class="name">预警查询</div>
                <div class="code-name">#icon-yujingchaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanpanliebiao"></use>
                </svg>
                <div class="name">研判列表</div>
                <div class="code-name">#icon-yanpanliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanpantongji"></use>
                </svg>
                <div class="name">研判统计</div>
                <div class="code-name">#icon-yanpantongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidingyibiaoqianchaoshi"></use>
                </svg>
                <div class="name">自定义标签超市</div>
                <div class="code-name">#icon-zidingyibiaoqianchaoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jizhanfamoxingchaoshi"></use>
                </svg>
                <div class="name">技战法模型超市</div>
                <div class="code-name">#icon-jizhanfamoxingchaoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changguitubiaoyanpan"></use>
                </svg>
                <div class="name">常规图表研判</div>
                <div class="code-name">#icon-changguitubiaoyanpan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changguijingqingliebiao"></use>
                </svg>
                <div class="name">常规警情列表</div>
                <div class="code-name">#icon-changguijingqingliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changguizhuantiyanpantai"></use>
                </svg>
                <div class="name">常规专题研判台</div>
                <div class="code-name">#icon-changguizhuantiyanpantai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changguiditumoshi"></use>
                </svg>
                <div class="name">常规地图模式</div>
                <div class="code-name">#icon-changguiditumoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changguiqingbaokeli"></use>
                </svg>
                <div class="name">常规情报颗粒</div>
                <div class="code-name">#icon-changguiqingbaokeli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changguijingqingtongji"></use>
                </svg>
                <div class="name">常规警情统计</div>
                <div class="code-name">#icon-changguijingqingtongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhinenggongjuxiang"></use>
                </svg>
                <div class="name">智能工具箱</div>
                <div class="code-name">#icon-zhinenggongjuxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaoyanpan"></use>
                </svg>
                <div class="name">图表研判</div>
                <div class="code-name">#icon-tubiaoyanpan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AImofang"></use>
                </svg>
                <div class="name">AI魔方</div>
                <div class="code-name">#icon-AImofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIyujingzhongxin"></use>
                </svg>
                <div class="name">AI预警中心</div>
                <div class="code-name">#icon-AIyujingzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changguitongjifenxi"></use>
                </svg>
                <div class="name">常规统计分析</div>
                <div class="code-name">#icon-changguitongjifenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIxiaqujiance"></use>
                </svg>
                <div class="name">AI辖区监测</div>
                <div class="code-name">#icon-AIxiaqujiance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIyaosufuneng"></use>
                </svg>
                <div class="name">AI要素赋能</div>
                <div class="code-name">#icon-AIyaosufuneng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIzhuantiganzhi"></use>
                </svg>
                <div class="name">AI专题感知</div>
                <div class="code-name">#icon-AIzhuantiganzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIjiqiren"></use>
                </svg>
                <div class="name">AI机器人</div>
                <div class="code-name">#icon-AIjiqiren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIzhuantiyanpantai"></use>
                </svg>
                <div class="name">AI专题研判台</div>
                <div class="code-name">#icon-AIzhuantiyanpantai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIyanpan"></use>
                </svg>
                <div class="name">AI研判</div>
                <div class="code-name">#icon-AIyanpan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditumoshi"></use>
                </svg>
                <div class="name">地图模式</div>
                <div class="code-name">#icon-ditumoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jingqingtongji"></use>
                </svg>
                <div class="name">警情统计</div>
                <div class="code-name">#icon-jingqingtongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIzhuantigongzuotai"></use>
                </svg>
                <div class="name">AI专题工作台</div>
                <div class="code-name">#icon-AIzhuantigongzuotai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erjibiaoqian"></use>
                </svg>
                <div class="name">二及标签</div>
                <div class="code-name">#icon-erjibiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIqingbaokeli"></use>
                </svg>
                <div class="name">AI情报颗粒</div>
                <div class="code-name">#icon-AIqingbaokeli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanjibiaoqian"></use>
                </svg>
                <div class="name">三级标签</div>
                <div class="code-name">#icon-sanjibiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIzhitaijianguan"></use>
                </svg>
                <div class="name">AI质态监管</div>
                <div class="code-name">#icon-AIzhitaijianguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhixinduhecha"></use>
                </svg>
                <div class="name">置信度核查</div>
                <div class="code-name">#icon-zhixinduhecha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huanbi"></use>
                </svg>
                <div class="name">环比</div>
                <div class="code-name">#icon-huanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongbi"></use>
                </svg>
                <div class="name">同比</div>
                <div class="code-name">#icon-tongbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nanxing"></use>
                </svg>
                <div class="name">男性</div>
                <div class="code-name">#icon-nanxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-laoren"></use>
                </svg>
                <div class="name">老人</div>
                <div class="code-name">#icon-laoren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nvxing"></use>
                </svg>
                <div class="name">女性</div>
                <div class="code-name">#icon-nvxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingnian"></use>
                </svg>
                <div class="name">青年</div>
                <div class="code-name">#icon-qingnian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weitianbao"></use>
                </svg>
                <div class="name">未填报</div>
                <div class="code-name">#icon-weitianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongnianren"></use>
                </svg>
                <div class="name">中年人</div>
                <div class="code-name">#icon-zhongnianren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaohai"></use>
                </svg>
                <div class="name">小孩</div>
                <div class="code-name">#icon-xiaohai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidingyibiaoqian"></use>
                </svg>
                <div class="name">自定义标签</div>
                <div class="code-name">#icon-zidingyibiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIjiarengongbiaoqian"></use>
                </svg>
                <div class="name">AI加人工标签</div>
                <div class="code-name">#icon-AIjiarengongbiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weizhi"></use>
                </svg>
                <div class="name">位置</div>
                <div class="code-name">#icon-weizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jingshigantanhao2"></use>
                </svg>
                <div class="name">警示 感叹号 ！2</div>
                <div class="code-name">#icon-jingshigantanhao2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaqu"></use>
                </svg>
                <div class="name">辖区</div>
                <div class="code-name">#icon-xiaqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanbu"></use>
                </svg>
                <div class="name">全部</div>
                <div class="code-name">#icon-quanbu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wangzhanming"></use>
                </svg>
                <div class="name">网站名</div>
                <div class="code-name">#icon-wangzhanming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dizhi"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-dizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingming"></use>
                </svg>
                <div class="name">姓名</div>
                <div class="code-name">#icon-xingming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jine"></use>
                </svg>
                <div class="name">金额</div>
                <div class="code-name">#icon-jine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QQ"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#icon-QQ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#icon-shouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhangka"></use>
                </svg>
                <div class="name">银行卡</div>
                <div class="code-name">#icon-yinhangka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-youxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chepai"></use>
                </svg>
                <div class="name">车牌</div>
                <div class="code-name">#icon-chepai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenfenzheng"></use>
                </svg>
                <div class="name">身份证</div>
                <div class="code-name">#icon-shenfenzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baogaozhongxin"></use>
                </svg>
                <div class="name">报告中心</div>
                <div class="code-name">#icon-baogaozhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengseyujing"></use>
                </svg>
                <div class="name">橙色预警</div>
                <div class="code-name">#icon-chengseyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huangseyujing"></use>
                </svg>
                <div class="name">黄色预警</div>
                <div class="code-name">#icon-huangseyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hongseyujing"></use>
                </svg>
                <div class="name">红色预警</div>
                <div class="code-name">#icon-hongseyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lanseyujing"></use>
                </svg>
                <div class="name">蓝色预警</div>
                <div class="code-name">#icon-lanseyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yujing"></use>
                </svg>
                <div class="name">预警</div>
                <div class="code-name">#icon-yujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiafazhenggai"></use>
                </svg>
                <div class="name">下发整改</div>
                <div class="code-name">#icon-xiafazhenggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AI"></use>
                </svg>
                <div class="name">AI</div>
                <div class="code-name">#icon-AI</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-AIjiaobiao"></use>
                </svg>
                <div class="name">AI角标</div>
                <div class="code-name">#icon-AIjiaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jizhanfamoxing"></use>
                </svg>
                <div class="name">技战法模型</div>
                <div class="code-name">#icon-jizhanfamoxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqianpeizhi"></use>
                </svg>
                <div class="name">标签配置</div>
                <div class="code-name">#icon-biaoqianpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiejing"></use>
                </svg>
                <div class="name">接警</div>
                <div class="code-name">#icon-jiejing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fankui1"></use>
                </svg>
                <div class="name">反馈</div>
                <div class="code-name">#icon-fankui1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fankuijiaobiao"></use>
                </svg>
                <div class="name">反馈角标</div>
                <div class="code-name">#icon-fankuijiaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reciyujing"></use>
                </svg>
                <div class="name">热词预警</div>
                <div class="code-name">#icon-reciyujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu2"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhinengbaogao"></use>
                </svg>
                <div class="name">智能报告</div>
                <div class="code-name">#icon-zhinengbaogao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingkong"></use>
                </svg>
                <div class="name">清空</div>
                <div class="code-name">#icon-qingkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia1"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minganci"></use>
                </svg>
                <div class="name">敏感词</div>
                <div class="code-name">#icon-minganci</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiejingjiaobiao"></use>
                </svg>
                <div class="name">接警角标</div>
                <div class="code-name">#icon-jiejingjiaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drxx69"></use>
                </svg>
                <div class="name">门户信息审核</div>
                <div class="code-name">#icon-drxx69</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drxx91"></use>
                </svg>
                <div class="name">人员管理</div>
                <div class="code-name">#icon-drxx91</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时 间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
